<template>
  <div class="app-container">
    <el-form ref="form" :inline="true" :model="form">
      <el-form-item label="数据源">
        <el-select v-model="form.dataType" placeholder="请选择数据源">
          <el-option label="影音娱乐" value="movie" />
          <el-option label="健康医疗" value="health" />
          <el-option label="新闻阅读" value="news" />
        </el-select>
      </el-form-item>
      <el-form-item label="查询条件">
        <el-select v-model="form.dataCondition" placeholder="时间范围">
          <el-option label="最近一个月" value="0" />
          <el-option label="最近半年" value="1" />
          <el-option label="最近一年" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">分析</el-button>
      </el-form-item>
    </el-form>
    <div class="chart-box">
      <component :is="showChartType" :data="data"/>
    </div>
  </div>
</template>

<script>
import MovieChart from './components/movieChart'
import HealthChart from './components/healthChart'
import NewsChart from './components/newsChart'
import { analyze, getBalance } from '@/api/table'
import { getToken, setToken } from '@/utils/auth'

export default {
  components: {
    MovieChart,
    HealthChart,
    NewsChart
  },
  data() {
    return {
      form: {
        dataType: '',
        dataCondition: ''
      },
      showChartType: 'MovieChart',
      data: {}
    }
  },
  methods: {
    fetchData(value) {
      if (this.form.dataType === 'movie') {
        this.$set(this, 'showChartType', 'MovieChart')
      } else if (this.form.dataType === 'health') {
        this.$set(this, 'showChartType', 'HealthChart')
      } else {
        this.$set(this, 'showChartType', 'NewsChart')
      }

      this.listLoading = true
      analyze({
        dataType: this.form.dataType,
        dataCondition: this.form.dataCondition,
        pay_password: value
      }).then(response => {
        this.data = response.data
      })
    },
    onSubmit() {
      if (!this.form.dataType || !this.form.dataCondition) {
        this.$alert('您还未选择数据源或查询条件', '', {
          confirmButtonText: '我知道了',
          center: true
        })
        return false
      }

      const fee = this.form.dataCondition === '0' ? '1' : (this.form.dataCondition === '1' ? '10' : '100')

      getBalance({}).then(response => {
        setToken('balance', response.data.balance)
        if (response.data.balance < Number(fee) + 1) {
          this.$alert(`您的账户可用余额不足，至少需要预留${Number(fee) + 1}个DLB，快去充值吧！`, '', {
            confirmButtonText: '我知道了',
            center: true
          })
        } else {
          this.$confirm(`您本次的查询预计花费${Number(fee) + 1}个DLB，是否继续？`, '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
            center: true
          }).then(() => {
            if (getToken('isSet') === '1') {
              // 设置了支付密码
              this.$prompt('请输入支付密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^\d{6}$/,
                inputErrorMessage: '支付密码格式不正确'
              }).then(({ value }) => {
                this.fetchData(value)
              })
            } else {
              // 未设置支付密码
              this.$confirm('您还未设置支付密码, 是否前往设置?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$router.push({ path: '/setting/pwdpay' })
              })
            }
          })
        }
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  background-color: #f0f2f5;
}
</style>
